<script setup lang="ts">
import TreeComponents, { type NodeCallback, type Tree, type TreeNode } from '@/components/TreeComponents.vue';
import { useCounterStore } from '@/stores/counter';
import { ref, onMounted } from 'vue';
import { orgApi } from '@/api/Api';
import { type TreeData } from '@/api/Struct';

const dataSource = ref<Tree[]>(new Array<Tree>())
let orgMap: Map<number, TreeData> | undefined;

const pageSize = ref(10)
const currentPage = ref(1)
const cb: NodeCallback = {
  click: (node: Tree, el: any, treeNode: any, evnet: any) => {
    console.log(node)
    console.log(el)
  }
}

const changeSize = (value: number)=>{
  pageSize.value = value;
  
}
const changePage = (value: number)=>{
  currentPage.value = value;
}

const getOrg = () => {
  orgApi.getOrg({
    success: (data: Map<number, TreeData>) => {
      dataSource.value.length = 0
      data.forEach((v, key) => {
        if (!data.has(v.pid)) {
          dataSource.value.push(v.index)
        }
      });
      dataSource.value.push({ id: -1, label: "所有组" })
      orgMap = data;
    }, fail: (err: any) => {
      console.log(err)
    }
  });
}

onMounted(() => {
  getOrg()
})

const tableData = [
  { name: "ces", phone: "12345678912", email: "gtinlian@sina.com", org: "gz, zxda ,dad, dad,fda,dfa,fesa,dfad", date_joined: "2021-10-10 13:12:12", last_login: "2021-10-10 13:12:12" },
  { name: "ces" },
  { name: "ces" },
  { name: "ces" },
  { name: "ces" },
  { name: "ces" },
  { name: "ces" },
  { name: "ces" },
  { name: "ces" },
  { name: "ces" },
]

</script>

<template>
  <div :hidden="useCounterStore().fullScreenValue" style="height: var(--ingres-top-bar);width: 250px; float: left">
    <TreeComponents :data="dataSource" :callback="cb" style="width: 250px; "></TreeComponents>
  </div>

  <el-divider :border-style="useCounterStore().fullScreenValue ? 'hidden' : 'double'" direction="vertical"
    id='org_divider' />
  <div :id='useCounterStore().fullScreenValue ? "fullScreen" : "context"'>
    <div style="height: calc( 100% - 55px )">
      <el-table :data="tableData" style="width: 100% ; " height="100%">
        <el-table-column prop="name" label="名字" width="160" align="center" />
        <el-table-column prop="username" label="账号" width="160" align="center" />
        <el-table-column prop="email" label="邮箱" width="260" align="center" />
        <el-table-column prop="phone" label="手机号" width="120" align="center" />
        <el-table-column prop="org" label="组织单位" width="260" align="center" />
        <el-table-column prop="date_joined" label="注册时间" width="230" align="center" />
        <el-table-column prop="last_login" label="上次登录时间" width="230" align="center" />
        <el-table-column fixed="right" label="授权" width="60" align="center">
          <template #default>
            <el-button link type="primary">
              编辑
            </el-button>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="110" align="center">
          <template #default>
            <el-button link type="primary">
              编辑
            </el-button>
            <el-button link type="primary">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block"  style="float: right;   margin-top: 15px;margin-right: 25px;">
      <div class="demonstration" style="float: left; margin-right: 15px;margin-top: 5px;">第1页</div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="changeSize"
        @current-change="changePage"
      />
    </div>
  </div>
</template>
<style scoped>
#org_divider {
  height: calc(100% - 72px);
  margin: 0px 0px
}

#context {
  float: right;
  height: calc(100% - var(--default-margin-double) - var(--default-top-bar));
  margin: 6px 6px 6px 6px;
  width: calc(100% - var(--default-margin-double) - 2px - var(--default-left-bar));
  border-radius: 5px;
}

#fullScreen {
  float: right;
  height: calc(100% - var(--default-margin-double));
  margin: 6px 6px 6px 5px;
  width: calc(100% - var(--default-margin-double));
  background-color: rgba(166, 167, 168, 0.705);
  border-radius: 5px;
}
</style>
